<template>
  <div>
    <div class="newTitle" v-if="postList.type === 1">
      <div class="header">
        <div class="iconfont iconjiantou2" @click="$router.back()"></div>
        <div class="logoNew">
          <span class="iconfont iconnew"></span>
        </div>
        <div class="btnFollow" :class="{ highlight: !postList.has_follow }" @click="handleFollow">{{ postList.has_follow ? '已关注' : '关注' }}</div>
      </div>
      <div class="textDetailsTitle">
        {{ postList.title }}
      </div>
      <div class="textDetailsUser">
        {{ postList.user.nickname }}
        {{ postList.user.create_date.split('T')[0] }}
      </div>
      <div class="textDetailMain" v-html="postList.content"></div>
    </div>

    <div class="videoDetails" v-if="postList.type === 2">
      <video
        class="player"
        controls
        poster="https://timgmb04.bdimg.com/timg?searchbox_feed&quality=100&wh_rate=0&size=b576_324&ref=http%3A%2F%2Fwww.baidu.com&sec=1568739067&di=612dd27cae470b93b01a4b32ef72fbac&src=http%3A%2F%2Fpic.rmb.bdstatic.com%2Fe18c6ffa079441431f8988ca4c3ac106.jpeg"
        :src="postList.content"
      ></video>
      <div class="info">
        <div class="user">
          <img :src="$axios.defaults.baseURL + postList.user.head_img" alt="" />
          {{ postList.user.nickname }}
        </div>
        <div class="btnFollow" :class="{ highlight: !postList.has_follow }" @click="handleFollow">
          {{ postList.has_follow ? '已关注' : '关注' }}
        </div>
      </div>
      <div class="title">
        {{ postList.title }}
      </div>
    </div>

    <div class="buttonsWrapper" @click="handleLike">
      <div class="btn dianzan">
        <span class="iconfont icondianzan"></span>
        {{ postList.like_length }}
      </div>
      <div class="btn weixin"><span class="iconfont iconweixin"></span> 微信</div>
    </div>

    <Comment @callReply="callReply" :commentData="item" :logoImg="$axios.defaults.baseURL + commentList[index].user.head_img" v-for="(item, index) in commentList" :key="item.id" />

    <div class="MoreComment">
      <div class="btn" @click="$router.push('/morecomment/' + $route.params.id)">
        更多跟帖
      </div>
    </div>
    <CommentInput @reloadComment="loadComment" ref="commentInput" :parentInfo="commentInfo" />
  </div>
</template>

<script>
import Comment from '@/components/comment/index'
import CommentInput from '../components/commentInput'

export default {
  components: {
    Comment,
    CommentInput
  },
  data() {
    return {
      postList: {},
      commentList: [],
      commentInfo: {}
    }
  },
  created() {
    this.$axios({
      url: '/post/' + this.$route.params.id
    }).then(res => {
      console.log(res.data)
      this.postList = res.data.data
    })

    this.loadComment()
  },
  methods: {
    handleFollow() {
      if (this.postList.has_follow) {
        this.$axios({
          url: '/user_unfollow/' + this.postList.user.id
        }).then(res => {
          if (res.data.message === '取消关注成功') {
            this.postList.has_follow = false
          }
        })
      } else {
        this.$axios({
          url: '/user_follows/' + this.postList.user.id
        }).then(res => {
          if (res.data.message === '关注成功') {
            this.postList.has_follow = true
          }
        })
      }
    },
    handleLike() {
      this.$axios({
        url: '/post_like/' + this.postList.id
      }).then(res => {
        console.log(res.data)
        if (res.data.message === '点赞成功') {
          this.postList.like_length += 1
        } else {
          this.postList.like_length -= 1
        }
      })
    },
    callReply(commentInfo) {
      this.commentInfo = commentInfo
      this.$refs.commentInput.showTextarea()
    },
    loadComment() {
      this.$axios({
        url: '/post_comment/' + this.$route.params.id
      }).then(res => {
        // console.log(res.data)
        if (res.data.data.length > 3) {
          res.data.data.length = 3
        }
        this.commentList = res.data.data
        console.log(this.commentList)
        this.commentInfo = {}
      })
    }
  }
}
</script>

<style lang="less" scoped>
.newTitle {
  padding: 0 4.4444vw;
  .header {
    display: flex;
    align-items: center;
    .logoNew {
      flex: 1;
      .iconnew {
        font-size: 15vw;
      }
    }
    .btnFollow {
      width: 17.2222vw;
      height: 7.2222vw;
      line-height: 7.2222vw;
      border: 1px solid #eeeeee;
      text-align: center;
      font-size: 3.3333vw;
      border-radius: 3.8889vw;
      &.highlight {
        background: red;
        border-color: red;
        color: white;
      }
    }
  }
  .textDetailsTitle {
    font-size: 5vw;
    font-weight: bold;
  }
  .textDetailsUser {
    font-size: 3.8889vw;
    color: #aaa;
    padding: 1.6667vw 0 4.4444vw;
  }
  .textDetailMain {
    /deep/ img {
      // 这里用 width 并不严谨
      max-width: 100%;
    }
    /deep/ p {
      text-indent: 2em;
    }
  }
}

.videoDetails {
  .player {
    width: 100%;
  }
  .info {
    padding: 3.8889vw, 4.4444vw;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 3.8889vw;
    .user {
      display: flex;
      align-items: center;
      color: #888;
    }
    .btnFollow {
      border: 1px solid #bbb;
      padding: 1.1111vw 2.7778vw;
      font-size: 3.3333vw;
      border-radius: 2.7778vw;
    }
    img {
      width: 6.9444vw;
      height: 7.2222vw;
      object-fit: cover;
      border-radius: 50%;
      margin-right: 1.6667vw;
    }
  }
  .title {
    padding: 0 4.4444vw;
    font-size: 4.4444vw;
    color: #333;
  }
}

.buttonsWrapper {
  display: flex;
  justify-content: space-around;
  padding: 40px 0 20px;
  border-bottom: 4px solid #e4e4e4;
  .btn {
    border: 1px solid #888;
    font-size: 14px;
    line-height: 30px;
    height: 30px;
    padding: 0 16px;
    border-radius: 16px;
    .iconweixin {
      color: #00c800;
    }
  }
}
.MoreComment {
  height: 25vw;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 8.3333vw;
  .btn {
    font-size: 3.8889vw;
    color: #666;
    padding: 0 5.5556vw;
    height: 8.8889vw;
    line-height: 8.8889vw;
    border: 1px solid #888;
    border-radius: 4.4444vw;
  }
}
</style>
